<template>
  <div>
    <!-- 头部 -->
    <div class="header-clear">
      <div class="header-img" @gogo="get">
        <span class="imgBox">
          <a @click="avatar">
            <img :src="img" alt="用户头像" />
          </a>
        </span>
        <!-- v-for="(item,index) in headerlist" :key="index" -->
        <a>
          <p class="name">{{username}}</p>
        </a>
      </div>
      <i class="icon-btn">
        <van-icon name="setting-o" size="0.2rem" color="#fff" />
      </i>
      <div>
        <van-button v-if="logcheck" class="logout" type="primary" @click="onClick">退出登陆</van-button>
      </div>
    </div>

    <div class="account">
      <div class="list">
        <span class="num">0.00</span>
        <span class="txt">卡包余额</span>
      </div>
      <div class="list">
        <span class="num">0</span>
        <span class="txt">悠币</span>
      </div>
    </div>

    <!-- 第二个模块 -->
    <div class="listTab">
      <ul>
        <li class="fourLi" v-for="(item,index) in tabList" :key="index">
          <a href>
            <i class="icon">
              <img :src="item.img" alt />
            </i>
            {{ item.tit }}
          </a>
        </li>
        <li class="borderLeft fourLi">
          <span class="listLeft"></span>
          <a href>
            <i class="icon">
              <img src="https://img07.yiguoimg.com/d/web/180315/01315/162344/allorder.png" alt />
            </i>
            全部订单 >
          </a>
        </li>
      </ul>
    </div>

    <!-- 第三个模块 -->
    <div class="test-list">
      <div class="list-box" v-for="(item,index) in testList" :key="index">
        <a href>
          <img :src="item.img" alt />
          {{ item.tit }}
        </a>
      </div>
    </div>

    <!-- 底部导航 -->
    <app-bottomnav></app-bottomnav>
  </div>
</template>

<script>
// 引入底部导航
import appBottomnav from "@/components/bottomNav";
import { getUser, logOut } from "@/utils/auth"; //引入cookie方法
import userApi from "@/api/userApi";
export default {
  data() {
    return {
      logcheck: true,
      img: "//img02.yiguo.com/e/web/150703/00781/140145/no-pic.jpg",
      username: "",
      // headerlist: [{ username: "登陆" }],
      tabList: [
        {
          tit: "待支付",
          img: "https://img07.yiguoimg.com/d/web/180608/01261/105825/unpaid.png"
        },
        {
          tit: "待收货",
          img: "https://img07.yiguoimg.com/d/web/180608/01261/105825/take.png"
        },
        {
          tit: "评价送悠币",
          img:
            "https://img05.yiguoimg.com/d/web/180608/01261/105825/evaluate.png"
        },
        {
          tit: "在线退换货",
          img:
            "https://img06.yiguoimg.com/d/web/180608/01261/105825/changing.png"
        }
      ],
      testList: [
        {
          tit: "优惠卷",
          img:
            "https://img07.yiguoimg.com/d/web/181029/00591/155051/coupons.png"
        },
        {
          tit: "充值卡",
          img:
            "https://img07.yiguoimg.com/d/web/181029/00591/155051/delivery.png"
        },
        {
          tit: "提货卷",
          img:
            "https://img07.yiguoimg.com/d/web/181029/00591/155051/address.png"
        },
        {
          tit: "收货地址",
          img:
            "https://img07.yiguoimg.com/d/web/181029/00591/155051/address.png"
        },
        {
          tit: "帮助中心",
          img: "https://img06.yiguoimg.com/d/web/181029/00591/155051/help.png"
        },
        {
          tit: "我的团购",
          img:
            "https://img02.yiguo.com/e/web/130101/app/icon/usercenter/box@3x.png"
        },
        {
          tit: "账户余额",
          img:
            "https://img06.yiguoimg.com/d/web/181121/00591/143839/account-icon.png"
        },
        {
          tit: "在线客服",
          img:
            "https://img07.yiguoimg.com/d/web/181029/00591/155051/service.png"
        }
      ]
    };
  },

  components: { appBottomnav },

  methods: {
    onClick() {
      this.$dialog
        .alert({
          message: "确认要退出吗？",
          showCancelButton: true
        })
        .then(() => {
          console.log("确认");
          logOut();
          this.img = "//img02.yiguo.com/e/web/150703/00781/140145/no-pic.jpg";
          this.username = "登陆/注册";

          this.logcheck = false;
        })
        .catch(() => {
          console.log("取消");
        });
    },
    showinfo() {
      // console.log(this.$route);
      let d = getUser();
      if (d != undefined) {
        let id = JSON.parse(d).id;
        userApi.getinfo(id).then(res => {
          // console.log(res.data.data, "...");
          if (res.data.data[0].img) {
            this.img = res.data.data[0].img;
            this.username = res.data.data[0].username;
          }
        });
      } else {
      }
    },

    avatar() {
      if (getUser() != undefined) {
        this.$router.push("/modify");
      } else {
        this.$router.push("/LRcom/login");
      }
    },
    get() {
      this.username = "登陆 / 注册";
      let list = getUser("username");
      if (list == undefined) {
        this.logcheck = false;
      } else {
        this.logcheck = true;
        let list2 = JSON.parse(list).username;
        // console.log(list2, "???");
        // console.log(list, ">>>");
        this.username = list2;
      }
      // this.username = JSON.parse(list).username;
    }
  },

  // watch() {},

  created() {
    this.get();
    this.showinfo();
  }
};
</script>

<style scoped>
.header-clear {
  width: 100%;
  height: 1.2rem;
  background: #2dd282
    url("//img06.yiguoimg.com/d/web/180517/01262/143351/bgimg.jpg") 100% 100%;
  background-size: 100% 100%;
}
.header-clear .header-img {
  width: 100%;
  height: 0.64rem;
  /* background: pink; */
  padding-top: 0.23rem;
  position: relative;
  top: 0.22rem;
}
.header-img .imgBox {
  display: block;
  width: 0.65rem;
  height: 0.65rem;
  /* border: 2px solid yellow; */
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0.15rem;
  overflow: hidden;
}
.imgBox img {
  width: 100%;
  height: 100%;
}
.header-img .name {
  display: block;
  width: 1.5rem;
  height: 0.4rem;
  /* background: tomato; */
  text-align: left;
  font-size: 14px;
  color: #ffffff;
  position: absolute;
  top: 0.2rem;
  left: 0.9rem;
}
.header-clear .icon-btn {
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  /* background: darkslateblue; */
  position: absolute;
  right: 0;
  top: 10px;
}
.van-icon {
  top: -0.74rem;
  left: -0.05rem;
}

/* account */
.account {
  width: 100%;
  height: 0.46rem;
  background: #fff;
  padding: 0.08rem;
  border-bottom: 1px solid #0e9f4e;
}
.account .list {
  display: flex;
  float: left;
  width: 1.52rem;
  height: 0.3rem;
  /* background: powderblue; */
  flex-direction: column;
}
.account .list .num {
  font-size: 0.1rem;
  color: #0e9f4e;
}
.account .list .txt {
  font-size: 0.1rem;
  color: #333333;
}

.listTab {
  width: 100%;
  height: 0.7rem;
  background: #ffffff;
  margin: 0.1rem 0;
}
.listTab ul {
  width: 100%;
  height: 100%;
}
.listTab ul .fourLi {
  width: 20%;
  height: 100%;
  /* background: #ccc; */
  float: left;
  /* display: flex; */
}
.fourLi a {
  width: 100%;
  height: 100%;
  color: #333;
  text-align: center;
  font-size: 0.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fourLi a .icon {
  display: inline-block;
  width: 0.2rem;
  height: 0.19rem;
  margin-bottom: 0.07rem;
}
.fourLi a .icon img {
  width: 100%;
  height: 100%;
}
.borderLeft .listLeft {
  position: absolute;
  right: 0.6rem;
  display: inline-block;
  width: 0.04rem;
  height: 0.7rem;
  background: url("//img07.yiguoimg.com/d/web/180313/01318/155922/xian.png")
    no-repeat center;
  background-size: 100% 100%;
}

/* 第三个模块 */
.test-list {
  width: 100%;
  height: 1.4rem;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
}
.test-list .list-box {
  width: 25%;
  height: 0.7rem;
  /* background: sandybrown; */
  border-bottom: 1px solid #fcfcfc;
}
.test-list .list-box a {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size: 0.1rem;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.test-list .list-box a img {
  width: 0.3rem;
  height: 0.3rem;
}

.logout {
  position: fixed;
  left: 70%;
  top: 7%;
  width: 0.7rem;
  height: 0.3rem;
  font-size: 0.1rem;
  border: none;
  background: #7edda7;
  /* display: none; */
}
</style>